<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <link rel="stylesheet" type="text/css" href="css/login.css">
</head>
<body onload="my_focus()">
<div  class="div1">
    <div class="div2">
        <div class="logo">
            <img id="img1" src="images/zhihu.jpg" width="100%">
        </div>
        <div class="div2_1">
            <p>登录知乎，发现更大的世界</p>
        </div>
    </div>
    <div class="form1">
        <form name="form1" method="post">
            <input  id="my_name" class="input1" type="text" name="name" onfocus="my_focus1()"   onblur="my_blur1()" placeholder="邮箱号或手机号"><br>
            <input  id="my_passwd" class="input1" type="password" name="passwd" onfocus="my_focus1()"  onblur="my_blur2()" placeholder="密码"><br>
            <input  class="input2" type="checkbox"><span class="span1">下次自动登录</span>
            <p><p>
            <input class="submit1" type="submit" value="登录">
        </form>
    </div>
    <div>
        <ul class="ul1">
            <li class="li1"><a href="#">忘记密码</a></li>
            <li class="li2"><a href="reg.html">注册账号</a></li>
        </ul>
    </div>
</div>
</body>
<script>
    function my_blur1() {
        var my_name = document.getElementById("my_name").value;
        if (my_name==null||my_name==""){
            document.getElementById("my_name").setAttribute("placeholder","请输入邮箱号或者手机号")
            document.getElementById("my_name").className="input3"
        }
    }
    function my_blur2() {
        var my_passwd = document.getElementById("my_passwd").value;
        if (my_passwd==null||my_passwd==""){
            document.getElementById("my_passwd").setAttribute("placeholder","请输入密码")
            document.getElementById("my_passwd").className="input4"
        }
    }
</script>
</html>